@charset "UTF-8";
/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font-family: "Lato", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 300; color: #191F21; background-color: #CAD3D8; -webkit-text-size-adjust: 100%; }

body, html { height: 100%; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 15px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }

/** Links */
a { color: #F2784B; text-decoration: none; }
a:visited { color: #e04810; }
a:hover { color: #191F21; text-decoration: underline; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: scroll; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.icon > svg path { fill: #828282; }

/** Head Navigation */
.head-nav { width: 200px; min-height: 100%; padding-bottom: 25px; position: fixed; top: 15px; left: 30px; z-index: 100; box-sizing: border-box; }

.page-content { width: 100%; box-sizing: border-box; padding-left: 230px; padding-right: 15px; position: absolute; top: 0; left: 0; }

/** Site header */
.site-header a { display: block; width: 100%; height: 100%; padding: 15px 0; box-sizing: border-box; color: #191F21; }
.site-header a:hover { text-decoration: none; color: #E24F14; }
.site-header h1 { font-size: 1.2em; margin-bottom: .3em; text-transform: uppercase; }

.site-nav, .tag-list { font-size: 1em; text-transform: capitalize; padding: 0; }
.site-nav ul, .tag-list ul { list-style: none; margin: 0; }
.site-nav ul li a, .tag-list ul li a { color: #191F21; padding: .2em 0; display: block; }
.site-nav ul li a:hover, .tag-list ul li a:hover { color: #E24F14; }
.site-nav ul li a.current, .tag-list ul li a.current { font-weight: 400; color: #E24F14; }
.site-nav small, .tag-list small { color: #8fa3aa; }

.tagline { margin: 45px 0; font-size: .9em; padding-right: 30px; }

.tag-list { font-size: 1em; }
.tag-list hr { border: 0; border-top: 1px solid #8fa3aa; width: 30px; margin: 15px 0; }

/** Tiles*/
/* ---- masonry ---- */
.grid-item { width: 400px; float: left; padding: 0 15px 15px; }
.grid-item img { border: 1px solid rgba(25, 31, 33, 0.05); }
.grid-item img:hover { border-color: rgba(25, 31, 33, 0.25); }
.grid-item .post-title { color: #191F21; margin-top: 7px; margin-bottom: 15px; }
.grid-item .post-title small { opacity: 0.5; font-size: 0.8em; text-transform: uppercase; display: inline-block; margin-left: 5px; }

.grid { margin-top: 15px; }

.pagination { padding: 30px; font-size: 2em; text-align: center; overflow: auto; width: 100%; box-sizing: border-box; }
.pagination a { border: 1px solid #728c94; display: inline-block; padding: 5px 15px; margin: 0 10px; color: #728c94; border-radius: 5px; width: 75px; }
.pagination a.next { text-align: right; float: right; }
.pagination a.previous { text-align: left; float: left; }
.pagination a:hover { text-decoration: none; background-color: #e6ebec; }

/** Zoom Page **/
.post { margin-top: 15px; }
.post img.screenshot { border: 1px solid rgba(25, 31, 33, 0.05); }
.post img.screenshot:hover { border-color: rgba(25, 31, 33, 0.25); }
.post .post-header { margin-top: 15px; }
.post .post-header h3 { margin-bottom: 0; }
.post .post-header .post-meta { font-size: .9em; }
.post .post-header .post-meta a { text-transform: capitalize; color: #191F21; }
.post .post-header .post-meta a:hover { color: #E24F14; }
.post .post-header .post-meta small { opacity: 0.5; font-size: 0.8em; text-transform: uppercase; display: inline-block; margin-left: 15px; margin-right: 5px; }
.post .post-header .post-meta small:first-child { margin-left: 0; }
.post h4.alt { opacity: 0.5; font-size: 0.9em; text-transform: uppercase; margin-bottom: .5em; }
.post img.alt { width: 31%; margin-right: 1%; margin-bottom: 15px; vertical-align: top; }

/* MOBILE */
@media screen and (max-width: 660px) { .head-nav { width: 100%; min-height: inherit; position: relative; box-sizing: border-box; padding: 30px 30px 0; top: 0; left: 0; text-align: center; }
  .site-header a { padding: 0; }
  .site-nav ul li { display: inline-block; }
  .site-nav ul li a { display: inline-block; }
  .site-nav ul li:after { content: "·"; margin: 0 6px; }
  .site-nav ul li:last-child:after { content: ""; margin: 0; }
  .page-content { width: 100%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; position: relative; }
  .grid-item { width: 100%; box-sizing: border-box; padding: 0; }
  .grid-item .post-title { margin-bottom: 37.5px; text-align: center; }
  .tagline { display: none; }
  .pagination a { margin: 0px; width: 30%; }
  .post .post-header h3, .post .post-header .post-meta, .post h4.alt { text-align: center; } }